<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 700px;
            border-collapse: collapse;
            margin-top: 30px;
            background: url("./表格背景.jpg") center center;
            border-collapse: collapse;
            margin: 0 auto;
}

tr:nth-child(2n) {
  background-color: #aeef08; /* 这里可以设置你需要的偶数行背景色 */
}

tr:nth-child(2n+1) {
  background-color: #06d0f9; /* 这里可以设置你需要的奇数行背景色 */
}


  .code-preview {
    position: relative;
    display: inline-block;
    font-size: 24px;
    color: rgb(44, 10, 234);
  }

  .code-preview .code {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 1000;
  }

  .code-preview:hover .code {
    display: block;
  }

        
    </style>
</head>
<body>

   <!-- 作业展示部分 -->
<div class="code-preview">
    <pre>关键代码</pre>
    <div class="code">
      &lt;<pre>
        &ltstyle>
          table {
              width: 700px;
              border-collapse: collapse;
              margin-top: 30px;
              background: url("./表格背景.jpg") center center;
              border-collapse: collapse;
  }
  
  tr:nth-child(2n) {
    background-color: #aeef08; /* 这里可以设置你需要的偶数行背景色 */
  }
  
  tr:nth-child(2n+1) {
    background-color: #06d0f9; /* 这里可以设置你需要的奇数行背景色 */
  }
          
      &lt/style>
  &lt/head>
  &ltbody>
     &lttable border="1" cellspacing="0">
      &ltcaption>成绩表&lt/caption>
      &lttr>
          &ltth>姓名&lt/th>
          &ltth>语文&lt/th>
          &ltth>数学&lt/th>
          &ltth>总分&lt/th>
      &lt/tr>
      &lttr>
          &lttd>李小璐&lt/td>
          &lttd>60&lt/td>
          &lttd>58&lt/td>
          &lttd>118&lt/td>
      &lt/tr>
      &lttr>
          &lttd>安可可&lt/td>
          &lttd>80&lt/td>
          &lttd>20&lt/td>
          &lttd>100&lt/td>
      &lt/tr>
  
  
  
  
     &lt/table>
     &ltbr>
     &lttable border="1" width="250" height="200" cellspacing="0">
      &lttr>
          &lttd rowspan="2">1占两行&lt/td>
          &lttd colspan="2">2占两行&lt/td>
          &lttd rowspan="3" colspan="2s">4占三行两列&lt/td>
      &lt/tr>
      &lttr>
          &lt!-- &lttd>&lt/td> -->
          &lttd>2&lt/td>
          &lttd>3&lt/td>
          &lt!-- &lttd>&lt/td> -->
          &lt!-- &lttd>&lt/td> -->
      &lt/tr>
      &lt!-- 第三行 -->
      &lttr>
          &lttd rowspan="2">1占两行&lt/td>
          &lttd>2&lt/td>
          &lttd>3&lt/td>
          &lt!-- 4，5列已有 -->
      &lt/tr>
      &lt!-- 第四行 -->
      &lttr>
          &lt!-- &lttd>第1列已有&lt/td> -->
          &lttd>2&lt/td>
          &lttd>3&lt/td>
          &lttd>4&lt/td>
          &lttd>5&lt/td>
      &lt/tr>
      &lt!-- 第五行 -->
      &lttr>
          &lttd>1&lt/td>
          &lttd>2&lt/td>
          &lttd>3&lt/td>
          &lttd>4&lt/td>
          &lttd>5&lt/td>
      &lt/tr>
      &lt!-- 第六行 -->
      &lttr>
          &lttd>1&lt/td>
          &lttd>2&lt/td>
          &lttd>3&lt/td>
          &lttd>4&lt/td>
          &lttd>5&lt/td>
      &lt/tr>
      &lt!-- 第七行 -->
      &lttr>
          &lttd colspan="3">1占3列&lt/td>
          &lttd>4&lt/td>
          &lttd>5&lt/td>
      &lt/tr>
      &lt!-- 第八行 -->
      &lttr>
          &lttd colspan="5">1&lt/td>
      &lt/tr>
  &lt/table>
  &ltbr>
  &lttable border="1" width="350" height="100" cellspacing="0">
      &ltcaption>复杂完整的成绩表&lt/caption>
      &lttr>
          &ltth rowspan="2">姓名&lt/th>
          &ltth colspan="2">通识课&lt/th>
          &ltth colspan="3">专业课&lt/th>
          &ltth rowspan="2">总分&lt/th>
      &lt/tr>
      &lt!-- 第二行 -->
      &lttr>
          &lt!-- &lttd>&lt/td> -->
          &ltth>英语&lt/th>
          &ltth>高数&lt/th>
          &ltth>设计&lt/th>
          &ltth>网特设计&lt/th>
          &ltth>程序设计&lt/th>
          &lt!-- &lttd>&lt/td> -->
      &lt/tr>
      &lt!-- 第三行 -->
      &lttr>
          &ltth>李四&lt/th>
          &lttd>60&lt/td>
          &lttd>70&lt/td>
          &lttd>80&lt/td>
          &lttd>90&lt/td>
          &lttd>80&lt/td>
          &lttd>380&lt/td>
      &lt/tr>
      &lt!-- 第四行 -->
      &lttr>
          &ltth>老五&lt/th>
          &lttd>60&lt/td>
          &lttd>70&lt/td>
          &lttd>80&lt/td>
          &lttd>90&lt/td>
          &lttd>80&lt/td>
          &lttd>380&lt/td>
      &lt/tr>
      &lt!-- 第五行 -->
      &lttr>
          &ltth>赵六&lt/th>
          &lttd>60&lt/td>
          &lttd>70&lt/td>
          &lttd>80&lt/td>
          &lttd>90&lt/td>
          &lttd>80&lt/td>
          &lttd>380&lt/td>
      &lt/tr>
      &lt!-- 第六行 -->
      &lttr>
          &ltth>老八&lt/th>
          &lttd>60&lt/td>
          &lttd>70&lt/td>
          &lttd>80&lt/td>
          &lttd>90&lt/td>
          &lttd>80&lt/td>
          &lttd>380&lt/td>
      &lt/tr>
      &lt!-- 第七行 -->
      &lttr>
          &ltth>平均&lt/th>
          &lttd>70&lt/td>
          &lttd>80&lt/td>
          &lttd>90&lt/td>
          &lttd>90&lt/td>
          &lttd>80&lt/td>
          &lttd>380&lt/td>
      &lt/tr>
  &lt/table>
      </pre>&gt;
    </div>
  </div>
  

   <table border="1" cellspacing="0">
    <caption>成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
    </tr>
    <tr>
        <td>李小璐</td>
        <td>60</td>
        <td>58</td>
        <td>118</td>
    </tr>
    <tr>
        <td>安可可</td>
        <td>80</td>
        <td>20</td>
        <td>100</td>
    </tr>




   </table>
   <br>
   <table border="1" width="250" height="200" cellspacing="0">
    <tr>
        <td rowspan="2">1占两行</td>
        <td colspan="2">2占两行</td>
        <td rowspan="3" colspan="2s">4占三行两列</td>
    </tr>
    <tr>
        <!-- <td></td> -->
        <td>2</td>
        <td>3</td>
        <!-- <td></td> -->
        <!-- <td></td> -->
    </tr>
    <!-- 第三行 -->
    <tr>
        <td rowspan="2">1占两行</td>
        <td>2</td>
        <td>3</td>
        <!-- 4，5列已有 -->
    </tr>
    <!-- 第四行 -->
    <tr>
        <!-- <td>第1列已有</td> -->
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <td colspan="3">1占3列</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <!-- 第八行 -->
    <tr>
        <td colspan="5">1</td>
    </tr>
</table>
<br>
<table border="1" width="350" height="100" cellspacing="0">
    <caption>复杂完整的成绩表</caption>
    <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">通识课</th>
        <th colspan="3">专业课</th>
        <th rowspan="2">总分</th>
    </tr>
    <!-- 第二行 -->
    <tr>
        <!-- <td></td> -->
        <th>英语</th>
        <th>高数</th>
        <th>设计</th>
        <th>网特设计</th>
        <th>程序设计</th>
        <!-- <td></td> -->
    </tr>
    <!-- 第三行 -->
    <tr>
        <th>李四</th>
        <td>60</td>
        <td>70</td>
        <td>80</td>
        <td>90</td>
        <td>80</td>
        <td>380</td>
    </tr>
    <!-- 第四行 -->
    <tr>
        <th>老五</th>
        <td>60</td>
        <td>70</td>
        <td>80</td>
        <td>90</td>
        <td>80</td>
        <td>380</td>
    </tr>
    <!-- 第五行 -->
    <tr>
        <th>赵六</th>
        <td>60</td>
        <td>70</td>
        <td>80</td>
        <td>90</td>
        <td>80</td>
        <td>380</td>
    </tr>
    <!-- 第六行 -->
    <tr>
        <th>老八</th>
        <td>60</td>
        <td>70</td>
        <td>80</td>
        <td>90</td>
        <td>80</td>
        <td>380</td>
    </tr>
    <!-- 第七行 -->
    <tr>
        <th>平均</th>
        <td>70</td>
        <td>80</td>
        <td>90</td>
        <td>90</td>
        <td>80</td>
        <td>380</td>
    </tr>
</table>
    


    
</body>
</html>